<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Jquery常用方法</title>
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>

    <style type="text/css">
        .question {
            background-color: antiquewhite;
        }
    </style>
</head>

<body>

    <h1 id="h1">明天<b>不上课</b></h1>
    <input type="text" id="username" value="520it" /><br/><br/><br/>
    <input type="checkbox" id="box">
    <a href="javascript:;" id="debug">DEBUG</a>

    <div id="debug_detail">
	    jQuery常用方法:<br/>
        jquery.size()//获取jquery获取dom的个数.<br/>
        jquery.val();//获取表单标签相关的值。<br/>
        jquery.html();//获取标签中的HTML代码。<br/>
        jquery.text();//获取标签中的纯文本，忽略html代码。<br/>
    </div>

    <div class="question">
        <li>问题一：获得username的值；<br>
            $("#username").val()
        </li>
        <li>问题二：为username设置值（小码哥教育）；<br>
            $("#username").val("小码哥教育")
        </li>
        <li>问题三：获取h1的html内容和纯文本内容，对结果进行比较；<br>
            $("#h1").html()<br>
            $("#h1").text()<br>
        </li>
        <li>问题四：把h1的颜色设置为黄色(attr)；<br>
            $("#h1").css("color","yellow")<br>
            $("#h1").attr("style","color:yellow")<br>
        </li>
        <li>问题五：完成类似struts2的debug效果(toggleClass/toggle)；<br>
            $("div").toggle()<br>
        </li>
    </div>

</body>

</html>